<template>
	<el-container direction="vertical">
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="curComponent">
				<el-tab-pane
					v-for="item in tagList"
					:key="item.name"
					:label="item.label"
					:name="item.name"
				></el-tab-pane>
			</el-tabs>
		</el-header>
		<keep-alive :max="10">
			<component :is="componentsParmas[curComponent]"/>
		</keep-alive>
	</el-container>
</template>

<script setup>
import { ref, shallowRef } from "vue";
import ResourceDetails from "./components/ResourceDetails/ResourceDetails.vue";
import ChannelDetails from "./components/ChannelDetails/ChannelDetails.vue";
import ResourceSummary from "./components/ResourceSummary/ResourceSummary.vue";

const tagList = ref([
	{
		label: "资源明细",
    name: "ResourceDetails"
	},
	{
		label: "渠道明细",
    name: "ChannelDetails"
	},
	{
		label: "资源汇总",
    name: "ResourceSummary"
	},
])
const componentsParmas = shallowRef({
  'ResourceDetails': ResourceDetails,
  'ChannelDetails': ChannelDetails,
  'ResourceSummary': ResourceSummary,
})

const curComponent = ref("ResourceDetails");

</script>

<style></style>
